<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>家长课堂</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<script src="../../js/mui.min.js"></script>
		<style>
			
			*{
				padding: 0px;
				border: 0px;
				margin: 0px;
				font-family: "微软雅黑";
			}
			
			.mui-fullscreen {
				position: absolute;
				top: 20%;
				right: 0;
				bottom: 0;
				left: 0
			}
			
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			
			#dv-top-nav a:link{
				color: #303030;
			}
			
			#dv-top-nav a:hover{
				color: #00A8C6;
			}
			
			#dv_con_left a:link{
				color: #303030;
			}
			
			#dv_con_left a:hover{
				color: #00A8C6;
			}
		</style>
	</head>

	<body style="width: 100%; height: 100%; background-color: white;">

		<div id="dv_body" class="mui-content" style="width: 100%; height: 100%; background-color: white;">
			<!--
        	作者：xuzhao_deng@sina.com
        	时间：2016-12-06
        	描述：微校园图片搜索
        	-->
			<div id="dv_jzktImg" style="margin:2px 0px 0px 0px; width: 100%; height: 20%;">
				<img src="../../img/jzkt/weixiaoyuanguanggao_02.png" style="width: 100%;" />
			</div>
			
			<div id="dv_jzktContent">
				<div class="mui-content mui-row mui-fullscreen">
					<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-07
                	描述：左边功能导航区
                    -->
					<div id="dv_con_left" class="mui-col-xs-3" style="background-color: #cfe6ee; width: 20%;">
						<div style="list-style: none; text-align: center; height: 100%;" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
							<a id="dv_left_zjjz" class="mui-control-item mui-active" href="#jzkt-zjjz-content">
								<div style="margin-top: 10px;">
									<img id="imgzjjz" src="../../img/jzkt/zhuanjiajiangzuo-lue_03.png" style="height: 32px; width: 32px;">
								</div>
								<div style="margin-top: -15px;">
									<span>专家讲座</span>
								</div>
							</a>
							<a id="commonProblem" class="mui-control-item">
								<div style="margin-top: 10px;">
									<img id="imgcjwt" src="../../img/jzkt/changjianwenti_03.png" style="height: 32px; width: 32px;">
								</div>
								<div style="margin-top: -15px;">
									<span>常见问题</span>
								</div>
							</a>
							<a id="dv-left-yls" class="mui-control-item" href="#jzkt-yls-content">
								<div style="margin-top: 10px;">
									<img id="imgyls" src="../../img/jzkt/jiazhangbixiu-white_06.png" style="height: 32px; width: 32px;">
								</div>
								<div style="margin-top: -15px;">
									<span>阅览室</span>
								</div>
							</a>
							<a id="dv-left-jzbx" class="mui-control-item" href="#jzkt-jzbx-content">
								<div style="margin-top: 10px;">
									<img id="imgjzbx" src="../../img/jzkt/jiazhangbixiu-bai_03.png" style="height: 32px; width: 32px;">
								</div>
								<div style="margin-top: -15px;">
									<span>家长必修</span>
								</div>
							</a> 
						</div>
					</div>
					<script>
						document.getElementById("dv_left_zjjz").addEventListener("tap", function() {
							document.getElementById("imgzjjz").src = "../../img/jzkt/zhuanjiajiangzuo-lue_03.png";
							document.getElementById("imgcjwt").src = "../../img/jzkt/changjianwenti_03.png";
							document.getElementById("imgyls").src = "../../img/jzkt/jiazhangbixiu-white_06.png";
							document.getElementById("imgjzbx").src = "../../img/jzkt/jiazhangbixiu-bai_03.png";
						});
						document.getElementById("commonProblem").addEventListener("tap", function() {
							document.getElementById("imgzjjz").src = "../../img/jzkt/zhuanjiajiangzuo_03.png";
							document.getElementById("imgcjwt").src = "../../img/jzkt/changjianwenti-blue_03.png";
							document.getElementById("imgyls").src = "../../img/jzkt/jiazhangbixiu-white_06.png";
							document.getElementById("imgjzbx").src = "../../img/jzkt/jiazhangbixiu-bai_03.png";
						});
						document.getElementById("dv-left-yls").addEventListener("tap", function() {
							document.getElementById("imgzjjz").src = "../../img/jzkt/zhuanjiajiangzuo_03.png";
							document.getElementById("imgcjwt").src = "../../img/jzkt/changjianwenti_03.png";
							document.getElementById("imgyls").src = "../../img/jzkt/jiazhangbixiu_06.png";
							document.getElementById("imgjzbx").src = "../../img/jzkt/jiazhangbixiu-bai_03.png";
						});
						document.getElementById("dv-left-jzbx").addEventListener("tap", function() {
							document.getElementById("imgzjjz").src = "../../img/jzkt/zhuanjiajiangzuo_03.png";
							document.getElementById("imgcjwt").src = "../../img/jzkt/changjianwenti_03.png";
							document.getElementById("imgyls").src = "../../img/jzkt/jiazhangbixiu-white_06.png";
							document.getElementById("imgjzbx").src = "../../img/jzkt/jiazhangbixiu-blue_07.png";
						});
					</script>
					<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-07
                	描述：右边内容区
                	-->
					<div class="mui-col-xs-9" style="width: 80%; float: left; background-color: white;">

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：专家讲座
                    	-->
						<div id="jzkt-zjjz-content" class="mui-control-content mui-active" style="width: 100%; margin-top: 0px;">
							<iframe src="expertlectures.html" style="width: 100%; height: 500px;"></iframe>
						
						</div>

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：常见问题
                    	-->
						<div id="jzkt-cjwt-content" class="mui-control-content">
                            
							<div id="bigCPLst" style="background-color: white;" >
							
							</div>

						</div>

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：阅览室
                    	-->
						<div id="jzkt-yls-content" class="mui-control-content" style="width: 100%;">
							
							<div id="dv-top-nav" style="display: flex; width: 100%; text-align: center; height: 25px; margin: 5px 0px 0px 0px; font-size: 16px;">
								<div style="width: 33%;">
									<a class="mui-control-item mui-active" href="#dv-yls-hwsc">好文收藏</a>
								</div>
								<div style="margin: 4px 0px 0px 0px;">
									<hr style="width: 1px; height: 16px; background-color: #DCDCDC;" />
								</div>
								<div style="width: 33%;">
									<a class="mui-control-item" href="#dv-yls-hssc">好书收藏</a>
								</div>
								<div style="margin: 4px 0px 0px 0px;">
									<hr style="width: 1px; height: 16px; background-color: #DCDCDC;" />
								</div>
								<div style="width: 33%;">
									<a class="mui-control-item" href="#dv-yls-jcsp">精彩视频</a>
								</div>
							</div>
							<div style="margin-top: 5px;">
								<hr style="width: 100%; height: 1px; background-color: #DCDCDC;" />
							</div>

							<!--
                            	作者：xuzhao_deng@sina.com
                            	时间：2016-12-26
                            	描述：好文
                            -->
							<div id="dv-yls-contents">
								<div id="dv-yls-hwsc" class="mui-control-content mui-active">
									<div id="rfc-goodTxtLst" style="margin-top: 2px;">
										<div id="ul-goodTxtLst">

										</div>
									</div>
									<div class="weui_cell" style="height:42px;background-size:cover; margin-top: 5px;">
										<span class="" style="float:right;margin-right: 10px;"><a href="good-txt.html" style="color: #00A8C6;">更多...</a></span>								
									</div>
								</div>

								<!--
									作者：xuzhao_deng@sina.com
									时间：2016-12-26
									描述：好书
								-->
								<div id="dv-yls-hssc" class="mui-control-content">
									<div id="rfc-goodBooksLst" style="margin-top: 2px;">
										<div id="ul-goodBooksLst" >

										</div>
									</div>
									<div class="weui_cell" style="height:42px;background-size:cover;">
										<span class="" style="float:right;margin-right: 10px;"><a href="good-books.html" style="color: #00A8C6;">更多...</a></span>								
									</div>
								</div>

								<div id="dv-yls-jcsp" class="mui-control-content" style="margin-top: 2px;">
									<iframe src="wondvideo.html" style="width: 100%; height: 500px;"></iframe>
									
								</div>

							</div>
						</div>

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：家长必修
                    	-->
						<div id="jzkt-jzbx-content" class="mui-control-content" style="background-color: white;">
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/utils/http.utils.js"></script>
	<script src="../../js/bus/pubfun.js"></script>
	<script>
	
		var $wxfwid = localStorage.getItem("wxfwid");
		if($wxfwid != null && $wxfwid != ""){
			
		}

		window.onload = function() {

			fun_loadBigCpLsts();

			fun_loadGoodTxtData();

			fun_loadGoodBooksData();
			
		}
		
		function fun_ComProTem(cpInfo, num) {
			var $cpInfoHtml =
				'<div style="display: flex; margin:0px 0px 10px 0px;" class="mui-table-view mui-table-view-chevron">'
                +	'<div style="margin:auto 0px auto 5px; width:30%"><a href="problem-lst.html?bpcode=' + cpInfo.code + '" style="color: black;">'
                +		'<img src="' + cpInfo.imagePath + '" style="height: 80px; width: 80px;" />'
                +	'</div>'  
                +	'<div style="margin-left: 10px; display: block; line-height: 23px; width:70%">'
                +		'<span style="color:#303030;font-size:16px;">' + cpInfo.title + '</span><br />'
                +		'<p style="font-size:15px; color:#909090;">' + cpInfo.description + '</p>'
                +		'<span style="font-size:15px;color:#909090;">' + cpInfo.faqNum + '个问题</span>'
                +	'</div></a>'
                +'</div>';
			return $cpInfoHtml;
		}

		function fun_loadBigCpLsts() {
			mui.ajax({
				url: $request_url.getBigComProLst,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					orgId: $wxfwid
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0) {
						var $cpTem = document.getElementById("bigCPLst");
						var $cpLsts = dat.result
						for(var i = 0; i < $cpLsts.length; i++) {
							var $cpLi = document.createElement('div');
							$cpLi.innerHTML = fun_ComProTem($cpLsts[i], i);
							$cpTem.appendChild($cpLi);
						}
						document.getElementById("commonProblem").href = "#jzkt-cjwt-content";
					}
				},
				error: function(err) {

				}
			});
		}

		function fun_goodTxtTem($txt, num) {
			var $goodTxtTem =
			
			'<a href="jzkt-goodTxtDetailed.html?txtid=' + $txt.id + '"><div style="display: flex; margin: 10px 5px 10px 4px;">'
            +   	'<div style="margin: 2px 5px 2px 5px; float: left;">'
            +    		'<img src="' + $txt.thumbnail + '" height="80" width="80" />'
            +    	'</div>'
            +    	'<div style="float: right; margin: 2px 0px 2px 10px; width: 80%;">'
            +    		'<div style="color: #303030; font-size: 16px; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">' + $txt.title + '</div>'
            +    		'<div style="display: block; margin-top: 30px; color: #303030; font-size: 14px; width: 100%;">'
            +    			'<span style="float: left;"><img src="../../img/jzkt/yanjing_03.png" width="16"/>&nbsp;'+ $txt.readCount +'</span>'
            +   			'<span style="float: right; margin-right: 20px;"><img src="../../img/comm.png" width="16" height="14"/>&nbsp;'+ $txt.commentInfo.commentNum +'</span>'
            +    		'</div>'
            +    	'</div>'
            +    '</div></a><hr style="width: 100%; background-color: #DCDCDC; height: 1px;" />';
			return $goodTxtTem;
		}

		function fun_loadGoodTxtData() {
			mui.ajax({
				url: $request_url.getGoodTxtLst,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					orgId: $wxfwid,
					typeCode: "HWSC",
					rows: 4,
					page: 0
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0) {
						var $GoodTxtDoc = document.getElementById("ul-goodTxtLst");
						var $goodTxtLst = dat.result
						if($goodTxtLst != null && $goodTxtLst.length > 0) {
							for(var i = 0; i < $goodTxtLst.length; i++) {
								var $gTxtLi = document.createElement('div');
								$gTxtLi.innerHTML = fun_goodTxtTem($goodTxtLst[i], i);
								$GoodTxtDoc.appendChild($gTxtLi);
							}
						} else {
							document.getElementById("ul-goodTxtLst").innerHTML = "<span style='text-align: center;'>暂无好文</span>";
						}
					} else {
						document.getElementById("ul-goodTxtLst").innerHTML = "<span style='text-align: center;'>暂无好文</span>";
					}
				},
				error: function(err) {

				}
			});
		}

		function fun_goodBooksTem($books, num) {
			var $goodBooksTem =
			
			'<a href="jzkt-goodBooksDetailed.html?booksid=' + $books.id + '"><div style="display: flex; margin: 10px 5px 10px 4px;">'
            +   	'<div style="margin: 2px 5px 2px 5px; float: left;">'
            +    		'<img src="' + $books.thumbnail + '" style="height:100px; width:80px;" />'
            +    	'</div>'
            +    	'<div style="float: right; margin: 2px 0px 2px 10px; width: 80%;">'
            +    		'<div style="color: #303030; font-size: 16px; width: 100%;">' + $books.title + '</div>'
            +    		'<div style="display: block; margin-top: 60px; color: #303030; font-size: 14px; width: 100%;">'
            +    			'<span style="float: left;"><img src="../../img/jzkt/yanjing_03.png" width="16"/>&nbsp;'+ $books.readCount +'</span>'
            +   			'<span style="float: right; margin-right: 20px;"><img src="../../img/comm.png" width="16" height="14"/>&nbsp;'+ $books.commentInfo.commentNum +'</span>'
            +    		'</div>'
            +    	'</div>'
            +    '</div></a><hr style="width: 100%; background-color: #DCDCDC; height: 1px;" />';
			return $goodBooksTem;
		}

		function fun_loadGoodBooksData() {
			mui.ajax({
				url: $request_url.getGoodBooksLst,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					orgId: $wxfwid,
					typeCode: "HSSC",
					rows: 4,
					page: 0
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0) {
						var $GoodBooksDoc = document.getElementById("ul-goodBooksLst");
						var $goodBooksLst = dat.result
						for(var i = 0; i < $goodBooksLst.length; i++) {
							var $gBooksLi = document.createElement('div');
							$gBooksLi.innerHTML = fun_goodBooksTem($goodBooksLst[i], i);
							$GoodBooksDoc.appendChild($gBooksLi);
						}
					}
				},
				error: function(err) {

				}
			});
		}

	</script>

</html>